<!--图片预览模块-->
<template>
  <div class="item-content item-img">
    <img :src="getImageUrl(backgroundImageId)" alt="图片" @load="updateDimensions(i)" />
  </div>
</template>

<script setup>
import Qs from "qs";
import { toRefs } from "vue";
import defaultBg from "@/assets/images/defaultBg.png";
import Conf from "@/utils/conf";
import { useTemplateEditing } from "@/store/modules/templateEditing";

const templateEditing = useTemplateEditing();
const { updateDimensions } = templateEditing;

//模块样式
const cssStyle = defineModel("cssStyle", {
  type: Object,
  required: true,
});

const { backgroundImageId, i } = toRefs(cssStyle.value);

/**
 * 定义获取图片URL的函数
 * @param moduleId 当前模块ID
 */
const getImageUrl = moduleId => {
  if (moduleId === "") {
    return new URL(defaultBg, import.meta.url).href;
  }
  const queryParams = Qs.stringify({ id: moduleId });
  return `${Conf.VITE_APP_BASE_API}/biz/common/image/loading?${queryParams}`;
};
</script>

<style lang="scss" scoped>
.item-img {
  height: 100%;
  img {
    width: 100%;
    height: 100%;
    cursor: move;
    box-shadow: 0 0 10px 0 #c9adad;
  }
}
</style>
